<template>
	<div class="u-general-color">
		<div v-for="(item,index) in Evaluations" :key="index" v-if="Evaluations && Evaluations.length>0">
			<div class="u-flex" style="width: 95%;margin: 0 auto;height: 150rpx;">
				<div>
					<u-avatar :src="judgeAvatar(item.AvatarUrl,item.Sex)" size="80"></u-avatar>
				</div>
				<div class="u-pl-5" style="display: flex;flex-direction: column;">
					<div class="u-title u-pl-5">
						{{item.NickName}}
					</div>
					<div>
						<u-tag
							v-for="(tagItem,tagIndex) in item.IdentityJob.split(',')"
							:key="tagIndex"
							:text="tagItem"
							type="info"
							mode="dark"
							size="mini"
							bg-color="#f7f5f8"
							v-if="item.IdentityJob && item.IdentityJob.length>0"
						></u-tag>
						<u-tag
							v-for="(tagItem,tagIndex) in item.Category.split(',')"
							:key="tagIndex"
							:text="tagItem"
							type="info"
							mode="dark"
							size="mini"
							bg-color="#f7f5f8"
							v-if="item.Category && item.Category.length>0"
						></u-tag>
					</div>
				</div>
			</div>
			<div>
				<div v-if="item.FileList.length == 1">
					<div @click="preview(item.FileList,0)">
						<u-image width="100%" height="600rpx" :src="item.FileList[0].thumbUrl"></u-image>
					</div>
				</div>
				<div style="display: flex;" v-if="item.FileList.length ==2">
					<div style="width: 50%;padding-right: 5rpx;" @click="preview(item.FileList,0)">
						<u-image width="100%" height="600rpx" :src="item.FileList[0].thumbUrl"></u-image>
					</div>
					<div style="width: 50%;" @click="preview(item.FileList,1)">
						<u-image width="100%" height="600rpx" :src="item.FileList[1].thumbUrl"></u-image>
					</div>
				</div>
				<div v-if="item.FileList.length > 2">
					<div class="u-flex">
						<div style="width: 65%;">
							<u-image width="100%" height="600rpx" :src="item.FileList[0].thumbUrl" @click="preview(item.FileList,0)"></u-image>
						</div>
						<div style="display: flex;flex-direction: column;width: 35%;padding-left: 5rpx;">
							<div style="padding-bottom: 5rpx;">
								<u-image width="100%" height="300rpx" :src="item.FileList[1].thumbUrl"  @click="preview(item.FileList,1)"></u-image>
							</div>
							<div class="last-pic" v-if="item.FileList.length > 3"  @click="preview(item.FileList,2)">
								<u-image width="100%" height="300rpx" :src="item.FileList[2].thumbUrl"></u-image>
								<div class="pic-mask">
									<span>{{item.FileList.length-3}}+</span>
								</div>
							</div>
							<div v-else>
								<u-image width="100%" height="300rpx" :src="item.FileList[2].thumbUrl"  @click="preview(item.FileList,2)"></u-image>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 文字内容 -->
			<div :class="item.FileList.length>0?'u-page u-pt-10':'u-page'" style="width: 95%;margin: 0 auto;">
				<div>
					<u-parse :html="escape2Html(escapeBR(item.Content))"></u-parse>
				</div>
			</div>
			<!-- 推荐商品 -->
			<div style="width: 95%;margin: 0 auto;" v-if="item.goodsName && item.goodsImages">
				<div class="aui-flex aui-flex-default aui-mar15" style="width: 70%;" @click="$u.route(item.url)">
					<div class="aui-flex-goods">
						<img :src="item.goodsImages" alt="">
					</div>
					<div class="aui-flex-box">
						<h2>{{item.goodsName?item.goodsName:''}}</h2>
						<div class="aui-flex aui-flex-clear" v-if="item.discountPrice">
							<div class="aui-flex-box">￥{{item.discountPrice?item.discountPrice:''}}</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 灰色分隔线 -->
			<div style="width: 100%;height: 10rpx;background-color: #f5f4f4;margin-top: 40rpx;"></div>
		</div>
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				goodsNo: '',// 商品编号
				pageNum: 1,
				pageSize: 10,
				Evaluations: [],
				DefaultAvatar: globalData.IMGS.DefaultAvatar,
				BoyAvatar: globalData.IMGS.BoyAvatar,
				GirlAvatar: globalData.IMGS.GirlAvatar,
				FilterDefaultAvatar: globalData.FilterDefaultAvatar
			}
		},
		
		onLoad(options) {
			
			// 未登录跳转到登录页面
			var loginRes = this.checkLogin()
			if (!loginRes) {
			  return false;
			}
			
			// 商品编号
			if (this.isNotNull(options.goodsNo)) {
				this.goodsNo = options.goodsNo;
				console.log("商品编号goodsNo=", this.goodsNo);
				this.getEvaluationData()
			} else {
				this.showMSG('error', '数据有误')
				setTimeout(() => {
					this.goBack()
				}, 1500)
			}
		},
		
		onPullDownRefresh() {
			this.pageNum = 1
			this.getEvaluationData()
			setTimeout(() => {
				// 停止Loading
				uni.stopPullDownRefresh();
			}, 1000)
		},
		
		onReachBottom() {
			this.pageNum += 1
			this.getEvaluationData()
		},
		
		
		methods: {
			
			/**
			 * 获取测评笔记列表数据（BPM）
			 */
			async getEvaluationData() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/minrest",
					appid: 'meily',
					wf_num: 'R_meily_BL001',
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					goodsNo: this.goodsNo,
					
				    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == 200){
					if(this.pageNum == 1){
						this.Evaluations = result.data
					}else{
						this.Evaluations = this.Evaluations.concat(result.data)
					}
				}
			},
			
			/**
			* 预览图片/视频
			*/
			preview(url_arr,index) {
				let sources_arr = []
				for(let i in url_arr) {
					let obj = {
						url: url_arr[i].url,
						type: url_arr[i].fileSuffix=="mp4"?"video":"image"
					}
					sources_arr.push(obj)
				}
				wx.previewMedia({
					sources: sources_arr,
					current: index
				});
			},
			
			/** 
			 * 将换行符转成<br>
			 * @param {Object} str
			 */
			escapeBR(str) {
				return str.replace(/\n/g, "<br>");
			},
			
			/** 
			 * 判断用户头像，如果不是上传到存储桶的头像则判断男女显示默认头像
			 */
			judgeAvatar(avatarUrl,sex) {
				if(this.isNotNull(avatarUrl) && this.FilterDefaultAvatar.indexOf(avatarUrl)==-1) {
					return avatarUrl
				}else {
					if(sex == '男') {
						return this.BoyAvatar
					}else {
						return this.GirlAvatar
					}
				}
			}
			
		}
	}
</script>

<style scoped>
	.width93 {
		width: 93%;
		margin: 0 auto;
	}
	
	.evaluation-show-title {
		margin: 10rpx 0rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.evaluation-show-title .left {
		margin: 20rpx 0rpx;
		font-weight: bolder;
		font-size: 40rpx;
	}
	
	.evaluation-show-title .right {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #9f9d9e;
	}
	
	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 40rpx;
	}
	
	/* **********关联商品start*************** */
	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15rpx;
		position: relative;
	}
	
	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}
	
	.aui-flex-goods {
		margin-right: .8em;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
	
	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}
	
	.aui-flex-default {
		/* background: #f3f1f1; */
		background-color: #f7f5f8;
	}
	
	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		/* padding-bottom: 5px; */
	}
	
	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}
	
	.aui-flex-clear {
		padding: 0;
		/* margin-top: 20rpx; */
	}
	
	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		/* font-weight: bold; */
	}
	/* **********关联商品end***************** */
	
</style>
